<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单数据的收集</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>

    <div id="app">
        <h1>{{msg}}</h1>
        <form @submit.prevent="send">
            用户名：<input type="text" v-model.trim="user.username" /> <br /><br />
            密码：<input type="password" v-model="user.password" /> <br /><br />
            年龄：<input type="number" v-model.number="user.age" /> <br /><br />
            性别：
                男<input type="radio" name="gender" v-model="user.gender" value="1"/>
                女<input type="radio" name="gender" v-model="user.gender" value="0"/> <br /><br />
            爱好：
                <!-- 注意：对于checkbox来说，如果没有手动指定value，那么会拿这个标签的checked属性的值作为value -->
                旅游<input type="checkbox"  v-model="user.interest" value="travel"/>
                运动<input type="checkbox" v-model="user.interest" value="sport"/>
                唱歌<input type="checkbox" v-model="user.interest" value="sing"/> <br /><br />
            学历：
                <select v-model="user.grade">
                    <option value="">请选择学历</option>
                    <option value="zk">专科</option>
                    <option value="bk">本科<option>
                    <option value="ss">硕士<option>
                </select> <br /><br />
            简介：
                <!-- .lazy后可以为失去焦点后双向绑定，节省资源 -->
                <textarea cols="50" rows="15" v-model.lazy="user.introduce"></textarea> <br /><br />
            <input type="checkbox" v-model="user.accept">阅读并接受协议 <br /><br />
            <!-- <button @click.prevent="send">注册</button> -->
            <button>注册</button>
        </form>
    </div>

    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: '表单数据的收集',
                user: {
                    username:'',
                    password:'',
                    age:'',
                    gender:'1',
                    interest:['travel'],
                    grade:'zk',
                    introduce:'',
                    accept: false
                }
                
            },
            methods: {
                send(){
                    //将data的数据搜集
                    console.log(JSON.stringify(this.$data))
                    //仅获取user的数据
                    console.log(JSON.stringify(this.user))
                }
            }
        })


    </script>

</body>

</html>